<template>
  <div class="movie">
    <h2>Movie</h2>
    <p>Count的值是{{ count }},总价格是：{{ totalPrice }}</p>
    <button @click="getMovieList">获取电影列表</button>
    <ul>
      <li v-for="item in movieList" :key="item.albumId">
        <h3>{{ item.albumName }}</h3>
        <p>{{ item.description }}</p>
        <!-- <img :src="`${item.imageUrl}`" alt="" width="100px" height="100px" /> -->
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  name: "Movie",
  computed: {
    ...mapState("count", ["count"]),
    ...mapState("movie", ["movieList"]),
    ...mapGetters("count", ["totalPrice"]),
  },
  methods: {
    ...mapActions("movie", ["getMovieList"]),
  },
};
</script>

<style scoped>
.movie {
  background-color: burlywood;
}
</style>
